import axios from "axios";
import { getBalance, mint } from "../contracts/helper/cUSDT";
import React, { useEffect, useState } from "react";
import style from "../css/ReCharge.css";
function ReCharge({ address }) {
  const [amount, setAmount] = useState("");
  const [balance, setBalance] = useState("");
  const getBa = async () => {
    try {
      const ba = await getBalance(address);
      console.log(ba / 1e18);
      setBalance(ba / 1e18);
    } catch (e) {
      console.error(e);
    }
  };
  useEffect(() => {
    getBa();
  }, [charge]);
  async function charge(e) {
    e.preventDefault();
    try {
      if (amount < 0) {
        alert("amount error");
      }
      axios.post("http://127.0.0.1:3001/charge", {
        address: address,
        amount: amount,
      });
    } catch (e) {
      console.error(e);
    }
  }

  return (
    <div className="container" style={{ width: "700px" }}>
      <div className="row">
        <div>
          <h1
            className="text-center"
            style={{
              textAlign: "center",
              fontSize: "40px",
              fontFamily: "Courier New, Courier, monospace",
              fontWeight: "bold",
              color: "#F5F5DC",
            }}
          >
            Charge Now
          </h1>
          <hr />
          <br />
        </div>
      </div>

      <div style={style} className="charge-container">
        <p
          style={{
            fontSize: "20px",
            fontFamily: "Courier New, Courier, monospace",
            fontWeight: "bold",
            color: "#F5F5DC",
          }}
        >
          balance: {balance instanceof Promise ? `...` : balance}
        </p>
        <form className="charge-form">
          amount:
          <input
            type="text"
            name="amount"
            onChange={(e) => {
              setAmount(e.target.value);
            }}
          />
          <br />
          <button onClick={charge}>charge</button>
        </form>
      </div>
    </div>
  );
}
export default ReCharge;
